<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">{{title}}-{{name}}-{{age}}</text>
			<view>
				<text class="title">{{title}}</text>
			</view>
			<!-- 	<text class="title">{{students[0].name}}</text>
			<view :hidden="title">
				title...
			</view>
			{{title}}-{{name}}-{{age}}
			<! <view v-for="(item,index) in students">
				{{index}}-{{item.name}}:{{item.age}}
			</view>
			<view :style="{fontSize:fontSize+'px'}">
				{{title}}
			</view>
		</view> -->
			<!-- <view v-for="(item,index) in menus" class="menus menuActive"> -->
			<!-- 	<view v-for="(item,index) in menus" class="menus" :class="[activeIndex==index?'menuActive':'']" @click="menuClick"
		 :id="'menu_'+index">
			{{item}}
		</view>
		<view class="demo" @click="clickTest" id="123456" @longtap="longtap"></view>
		<view id="789" style="width: 50px;height: 50px; background: #800080;"></view> -->
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data: function() {
			return {
				title: false,
				name: '啦啦啦',
				age: 18,
				students: [{
						name: "张三",
						age: 18
					},
					{
						name: "李四",
						age: 20
					}
				],
				fontSize: 100,
				activeIndex: 0,
				menus: ['新闻', '汽车', '读书']
			}

		},

		// onLoad () {
		// 	_self = this;
		// 	setTimeout(function() {
		// 		_self.age = 3
		// 	}, 1000);
		// }
		onLoad() {
			_self = this;
			setTimeout(function() {
				_self.fontSize = 10;
			}, 3000);
		},
		methods: {
			menuClick: function(e) {
				var aId = e.target.id;
				aId = aId.substr(5);
				_self.activeIndex = aId;
			},
			clickTest: function(e) {
				//获取当前元素的某一属性
				alert(e.currentTarget.id);
				alert(e.target.id);
			},
			longtap: function(e) {
				alert(e.target.id);
			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	} */

	.text-area {
		background:#FF0000;
		height: 300rpx;
		width: 100%;
		display: flex;
		margin-top: auto;
		padding-left: 100rpx;
		margin-right: auto;
		margin-bottom: auto;
		display: flex;
		align-items: center;
	}

	/* .title {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #1AAD19;
		font-size: 36rpx;
		color: #007AFF;
	} */

	/* .menus {
		padding: 10px;
		float: left;
		margin: 5px;
		line-height: 36px;
	}

	.menuActive {
		color: #800080 !important;
	}

	.demo {
		width: 400px;
		height: 500px;
		background: #008000;
	} */
</style>
